<template>
	<view>
		<u-popup :show="show" :round="10" @close="close">
			<view class="popupTitle">
				<u-search :focus="focus" placeholder="请输入关键字" v-model="searchKey" style="margin: 10rpx 0;"
					@search='search' @clear="clear" @custom='search' actionText="搜索"></u-search>
			</view>
			<view class="popupBody">
				<z-paging :auto='false' ref="paging" style="height: 100%;" :fixed="false" v-model="data" @query="query"
					:default-page-no="1" :default-page-size="10">
					<u-checkbox-group borderBottom v-model="checked" iconPlacement="right" placement="column">
						<u-checkbox @click.stop='clickCheck(item.id)' :customStyle="{marginBottom: '8px'}" v-for="item in data" :key="item.id"
							:name='item.id' :label='item.display_name'></u-checkbox>
					</u-checkbox-group>
				</z-paging>
			</view>
			<view style="margin-top: 10rpx;padding: 0 40rpx;">
				<u-button @click='userBinding' color="#3975c6" v-if="checked.length">
					确认
				</u-button>
				<u-button @click='userBinding'  v-else>
					确认
				</u-button>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		props: ['show', 'role_ids'],
		data() {
			return {
				focus: false,
				searchKey: '',
				data: [],
				loading: true,
				checked: []
			}
		},
		watch: {
			show() {
				this.checked=this.role_ids
				if (!this.data.length && this.show) {
					this.$refs.paging.reload()
				}
			}
		},
		methods: {
			close() {
				this.$emit('close')
			},
			search() {
				this.$refs.paging.reload()
			},
			clear() {
				this.focus = false
				setTimeout(() => {
					this.focus = true
				}, 100)
			},
			query(page, size) {
				let obj = {
					page,
					size,
					keywords: this.searchKey
				}
				uni.showLoading({
					title: '加载中...'
				})
				this.$api_company.Administrator_role.List(obj).then(res => {
					this.$refs.paging.complete(res.data.data.filter(item=>!this.role_ids.includes(item.id)))
					uni.hideLoading()
					this.loading = false
				}).catch(err => {
					uni.$u.toast(err.message)
					uni.hideLoading()
				})

			},
			userBinding() {
				if (!this.checked.length) {
					uni.$u.toast('请先选择角色')
					return
				}
				let arr=[]
				this.checked.forEach(item=>{
					let arrItem=this.data.filter(filterItem=>filterItem.id==item)[0]
					if(arrItem){
						arr.push(arrItem)
					}
				})
				this.$emit('selectRole', arr)
				this.close()
			},
			clickCheck(id){
				if(this.checked.includes(id)){
					this.checked=this.checked.filter(item=>item!=id)
				}else{
					this.checked.push(id)
				}
			}
		}
	}
</script>

<style>
</style>